<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

       
          <el-form-item label="时间" prop="dateNumber">
            <el-date-picker v-model="dateNumber" type="daterange" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="ChangeData">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入账号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="通道" prop="channel">
          <el-input
            v-model="queryParams.channel"
            placeholder="请输入通道"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="网关" prop="gateway">
          <el-input
            v-model="queryParams.gateway"
            placeholder="请输入网关"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> <el-form-item label="地区" prop="address">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入地区"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
  
      </el-form>
      <el-table :data="list"  style="width: 100%" id="apiIndex">
        <el-table-column type="index" width="50" fixed align="center" />
        <el-table-column fixed prop="createTime" width="160" align="center"  label="时间" />
        <!-- <el-table-column fixed prop="username" align="center" label="账号" />
        <el-table-column fixed prop="administrator" align="center" label="管理员" />
        <el-table-column fixed prop="business" align="center" label="业务" />
        <el-table-column fixed prop="address" align="center" label="地区" />
        <el-table-column fixed prop="mcc" align="center" label="MCC" />
        <el-table-column fixed prop="mnc" align="center" label="MNC" />
        <el-table-column fixed prop="channel" align="center" label="通道" />
        <el-table-column fixed prop="gateway" align="center" label="网关" /> -->
        <el-table-column fixed prop="sendNum" align="center" label="发送条数" />
        <el-table-column fixed prop="successNum" align="center" label="成功条数" />
        <el-table-column fixed prop="failNum" align="center" label="失败条数" />
        <el-table-column fixed prop="unknownNum" align="center" label="未知条数" />
        <el-table-column fixed prop="successRate" align="center" label="成功率" />
        <el-table-column fixed prop="failRate" align="center" label="失败率" />
        <el-table-column fixed prop="unknownRate" align="center" label="未知率" />
      </el-table>
      <br>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="display: flex;align-items: center;justify-content: flex-end;">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { SendStatistics } from "@/api/thoroughfare/deduction";
  
  export default {
    name: "Online",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        dateNumber:'',
        // 查询参数
        queryParams: {
             time1:'',
            time2:'',
            username: "",
            gateway:"",
            address:"",
            channel:"",
            pageCode: 1,
            pageSize: 10,
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询通道网关用户等列表 */

      
      /** 查询登录日志列表 */
      getList() {
        this.loading = true;
        SendStatistics(this.queryParams).then(response => {
          this.list = response.data.pageList;
          this.total = response.data.totalCount;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageCode = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.dateNumber=""
        this.queryParams.time1 = ''
        this.queryParams.time2 = ''
        this.handleQuery();
      },
      async handleSizeChange(val) {
        this.queryParams.pageSize = val;
        this.getList();
      },
      async handleCurrentChange(val) {
        this.queryParams.pageCode = val;
        this.getList();
      },
      ChangeData(e) {
      if (e) {
        this.queryParams.time1 = e[0]
        this.queryParams.time2 = e[1]
      } else {
        this.queryParams.time1 = ''
        this.queryParams.time2 = ''
      }
    }
    }
  };
  </script>
  <style scoped>
  .pagingdud{
      display: flex;
      align-items: center;
    justify-content: flex-end;    
    }
  
  